<template>
    <div class="app-container">
        <!-- 卡片-->
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>人天统计</span>
            </div>

            <!-- 查询条件-->
            <el-form :inline="true" :model="selectParam" label-width="80px" class="demo-form-inline" size="small">
                <el-form-item label="所属部门:">
                    <el-select v-model="selectParam.deptName" placeholder="请选择所属部门" style="width: 290px">
                        <el-option label="全部" :value="null"></el-option>
                        <el-option v-for="(item,index) in depts" :label="item.deptName" :key="index" :value="item.deptName" style="width: 260px"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="项 目:">
                    <el-select v-model="selectParam.proNo" placeholder="请选择项目" style="width: 290px" filterable>
                        <el-option label="全部" :value="null"></el-option>
                        <el-option
                                v-for="(item,index) in projects"
                                :label="item.proName"
                                style="width: 280px"
                                :title="item.proName"
                                :key="index"
                                :value="item.proNo">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="在职状态:">
                    <el-select v-model="selectParam.isResign" placeholder="请选择在职状态" style="width: 290px">
                        <el-option label="全部" :value="null"></el-option>
                        <el-option label="在职" value="1"></el-option>
                        <el-option label="离职" value="0"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="员工姓名:">
                    <el-input v-model.trim="selectParam.userName" style="width: 290px" placeholder="请输入员工姓名" maxLength="1000"></el-input>
                </el-form-item>
                <el-form-item label="打卡日期:">
                    <el-date-picker type="date"
                                    placeholder="开始"
                                    v-model="selectParam.beginDate"
                                    value-format="yyyy-MM-dd"
                                    format="yyyy-MM-dd"
                                    style="width: 140px;">
                    </el-date-picker>
                    -
                    <el-date-picker type="date"
                                    placeholder="结束"
                                    v-model="selectParam.endDate"
                                    value-format="yyyy-MM-dd"
                                    format="yyyy-MM-dd"
                                    style="width: 140px;">
                    </el-date-picker>
                </el-form-item>

                <el-form-item style="float: right" >
                    <el-button
                            type="primary"
                            @click="selectParamButton">查询
                    </el-button>
                    <el-button
                            type="primary"
                            v-if="userButtonIds.indexOf('log.logReviewAgain.expot') != -1"
                            @click="exportButton">导出
                    </el-button>
                </el-form-item>
            </el-form>

<!--            查看绩效小于投入-->
            <div style="text-align: right;margin: 10px">
                <el-checkbox
                        v-model="selectParam.less"
                        true-label="1"
                        @change="lessChange">查看绩效小于投入
                </el-checkbox>
            </div>

            <el-table
                    :data="list"
                    border
                    size="small"
                    :header-cell-style="tableHeaderStyle"
                    style="width: 100%">
                <el-table-column
                    fixed
                    label="No."
                    type="index"
                    header-align="center"
                    align="center"
                    width="70">
                    <template slot-scope="scope">
                        {{ (page.pageNum - 1) * page.pageSize + scope.$index + 1 }}
                    </template>
                </el-table-column>
                <el-table-column
                    fixed
                    prop="userName"
                    label="成员"
                    header-align="center"
                    align="center"
                    width="150">
                </el-table-column>
                <el-table-column
                    prop="deptName"
                    label="所属部门"
                    header-align="center"
                    align="center"
                    width="120">
                </el-table-column>
                <el-table-column
                    prop="date"
                    label="打卡日期"
                    header-align="center"
                    align="center"
                    width="120">
                </el-table-column>
                <el-table-column
                    prop="isResign"
                    label="在职状态"
                    header-align="center"
                    align="center"
                    width="120">
                    <template slot-scope="scope">
                        <el-tag v-show="scope.row.isResign == 1" size="small">在职</el-tag>
                        <el-tag v-show="scope.row.isResign == 0" size="small" type="danger">离职</el-tag>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="sumPutinDaily"
                    label="投入人天"
                    header-align="center"
                    align="center"
                    width="100">
                    <template slot-scope="scope">
                        <el-link type="primary" @click="selectLoginfo(scope.row)"><b>{{ scope.row.sumPutinDaily }}</b></el-link>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="sumPerformanceDaily"
                    label="绩效人天"
                    header-align="center"
                    align="center"
                    width="100">
                    <template slot-scope="scope">
                        <el-link type="primary" @click="selectLoginfo(scope.row)"><b>{{ scope.row.sumPerformanceDaily }}</b></el-link>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="onDutyTime"
                    label="考勤时间"
                    header-align="center"
                    width="150">
                    <template slot-scope="scope">
                        <div style="text-align: left">
                            <div v-if="scope.row.onDutyTimeResult === 'Normal'" class="warpper_item">
                                <div class="start">
                                    <div class="circle1" style="background: #6DD400"></div>
                                    {{ getTimeFormat(scope.row.onDutyTime) }}
                                </div>
                            </div>
                            <div v-else-if="scope.row.onDutyTimeResult === 'Early'" class="warpper_item">
                                <div class="start">
                                    <div class="circle1" style="background: #6DD400"></div>
                                    {{ getTimeFormat(scope.row.onDutyTime) }}
                                </div>
                            </div>
                            <div v-else-if="scope.row.onDutyTimeResult === 'Late'" class="warpper_item">
                                <div class="start">
                                    <div class="circle1" style="background: #FFBB00"></div>
                                    {{ getTimeFormat(scope.row.onDutyTime) }}
                                </div>
                            </div>
                            <div v-else-if="scope.row.onDutyTimeResult === 'SeriousLate'" class="warpper_item">
                                <div class="start">
                                    <div class="circle1" style="background: #FFBB00"></div>
                                    {{ getTimeFormat(scope.row.onDutyTime) }}
                                </div>
                            </div>
                            <div v-else-if="scope.row.onDutyTimeResult === 'Absenteeism'" class="warpper_item">
                                <div class="start">
                                    <div class="circle1" style="background: #FF1B1B"></div>
                                    旷工
                                </div>
                            </div>
                            <div v-else-if="scope.row.onDutyTimeResult === 'NotSigned'" class="warpper_item">
                                <div class="start">
                                    <div class="circle1" style="background: #FF1B1B"></div>
                                    {{ scope.row.onDutyTime ? getTimeFormat(scope.row.onDutyTime) : '未打卡'}}
                                </div>
                            </div>
                            <div v-else style="visibility:hidden">
                                {{ 'null' }}
                            </div>

                            <div v-if="scope.row.offDutyTimeResult === 'Normal'" class="warpper_item">
                                <div class="start">
                                    <div class="circle1" style="background: #6DD400"></div>
                                    {{ getTimeFormat(scope.row.offDutyTime) }}
                                </div>
                            </div>
                            <div v-else-if="scope.row.offDutyTimeResult === 'Early'" class="warpper_item">
                                <div class="start">
                                    <div class="circle1" style="background: #6DD400"></div>
                                    {{ getTimeFormat(scope.row.offDutyTime) }}
                                </div>
                            </div>
                            <div v-else-if="scope.row.offDutyTimeResult === 'Late'" class="warpper_item">
                                <div class="start">
                                    <div class="circle1" style="background: #FFBB00"></div>
                                    {{ getTimeFormat(scope.row.offDutyTime) }}
                                </div>
                            </div>
                            <div v-else-if="scope.row.offDutyTimeResult === 'SeriousLate'" class="warpper_item">
                                <div class="start">
                                    <div class="circle1" style="background: #FFBB00"></div>
                                    {{ getTimeFormat(scope.row.offDutyTime) }}
                                </div>
                            </div>
                            <div v-else-if="scope.row.offDutyTimeResult === 'Absenteeism'" class="warpper_item">
                                <div class="start">
                                    <div class="circle1" style="background: #FF1B1B"></div>
                                    旷工
                                </div>
                            </div>
                            <div v-else-if="scope.row.offDutyTimeResult === 'NotSigned'" class="warpper_item">
                                <div class="start">
                                    <div class="circle1" style="background: #FF1B1B"></div>
                                    {{ scope.row.onDutyTime ? getTimeFormat(scope.row.onDutyTime) : '未打卡'}}
                                </div>
                            </div>
                            <div v-else style="visibility:hidden">
                                {{ 'null' }}
                            </div>
                        </div>

                    </template>
                </el-table-column>
                <el-table-column
                    prop="leaveRemark"
                    label="假勤备注"
                    header-align="center">
                    <template slot-scope="scope">
                            <div>{{scope.row.leaveRemark}}</div>
                            <div>{{scope.row.attendanceRemark}}</div>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页-->
            <div style="text-align:right;margin: 15px;margin-right: 0px">
                <el-pagination
                    background
                    layout="prev, pager, next"
                    :page-size="page.pageSize"
                    :current-page="page.pageNum"
                    @current-change = "changeCurrentPage"
                    :total="page.pageCount">
                </el-pagination>
            </div>


            <!-- Table -->
            <el-dialog title="投入天数" :visible.sync="dialogTableVisible">
                <el-table
                        :data="infos"
                        :header-cell-style="tableHeaderStyle"
                        show-summary
                        :summary-method="getSummaries"
                        border
                        size="small"
                        style="margin-bottom: 20px">
                    <el-table-column
                            property="workDate"
                            header-align="center"
                            align="center"
                            label="日期" >
                        <template slot-scope="s">
                            {{getNowTimeByDate(s.row.workDate)}}
                        </template>
                    </el-table-column>
                    <el-table-column
                            property="proName"
                            header-align="center"
                            align="center"
                            label="项目" >
                    </el-table-column>
                    <el-table-column
                            property="putinDaily"
                            label="投入人天"
                            header-align="center"
                            align="center"
                            width="150">
                    </el-table-column>
                    <el-table-column
                            property="performanceDaily"
                            header-align="center"
                            align="center"
                            label="绩效人天" width="150" >
                    </el-table-column>
                </el-table>
            </el-dialog>

        </el-card>
    </div>

</template>

<script>

import {http_dropdownBox_depts} from '@/api/user'
import {tableHeaderStyle,} from '@/utils/constant'
import {http_logReviewAgain_list,http_logReviewAgain_deptList,http_export_List} from '@/api/logReviewAgain'
import {http_prject_All_listA} from '@/api/downBox'
import moment from "moment";
import {Message} from "element-ui";


export default {
    data() {
        return {
            tableHeaderStyle:tableHeaderStyle,
            userButtonIds: JSON.parse(localStorage.getItem("user")).buttonIds,
            list: [],
            infos: [],
            depts: [],
            projects:[],

            page: {
                pageNum: null,
                pageSize: null,
                pageCount: null,
            },

            selectParam: {
                beginDate: this.getNowTime(),
                endDate: this.getNowTime(),
                proNo: null,
                isResign: null,
                userName: null,
                deptId: null,
                oldBeginDate: this.getNowTime(),
                oldEndDate: this.getNowTime(),
                less:null,
            },
            selectParamVersion: 0,

            dialogTableVisible: false,

        }
    },
    methods: {
        http_list() {
            if (this.selectParamVersion > 0){
                this.page.pageNum = 1
            }
            http_logReviewAgain_list(this.page,this.selectParam).then(result => {
                const {data} = result
                this.list = data.records
                this.page = {
                    pageNum: data.current,
                    pageSize: data.size,
                    pageCount: data.total,
                }
                this.selectParamVersion = 0
            })
        },
        http_infoList(param){
            http_logReviewAgain_deptList(param,this.selectParam.proNo).then(result=>{
                const { data} = result
                this.infos = data
            })
        },
        http_dept_list(){
            http_dropdownBox_depts().then(result=>{
                const {data} = result
                this.depts = data
            })
        },
        http_export(){
            http_export_List(this.selectParam)
        },
        http_pro_list(){
            http_prject_All_listA().then(result=>{
                const { data} = result
                // console.log(result)
                this.projects = data
            })
        },
        reviewButton_openDrawer(param) {
            this.drawer = true
        },
        selectLoginfo(param){
            this.http_infoList(param)
            this.dialogTableVisible = true
        },
        changeCurrentPage(val){
            this.page.pageNum = val
            this.http_list()
        },
        selectParamButton(){
            this.http_list()
        },
        exportButton(){
            this.http_export()
        },
        getNowTime() {
            let now = new Date();
            let year = now.getFullYear(); //得到年份
            let month = now.getMonth(); //得到月份
            let date = now.getDate(); //得到日期
            month = month + 1;
            month = month.toString().padStart(2, "0");
            date = date.toString().padStart(2, "0");
            let defaultDate = `${year}-${month}-${date}`;
            return defaultDate;
        },
        getNowTimeByDate(date1) {
            let now = new Date(date1)
            let year = now.getFullYear(); //得到年份
            let month = now.getMonth(); //得到月份
            let date = now.getDate(); //得到日期
            month = month + 1;
            month = month.toString().padStart(2, "0");
            date = date.toString().padStart(2, "0");
            let defaultDate = `${year}-${month}-${date}`;
            return defaultDate;
        },
        getTimeFormat(date){
            return date && moment(date).format('HH:mm') || '未打卡'
        },
        getSummaries(param) {
            const { columns, data } = param;
            const sums = [];
            columns.forEach((column, index) => {
                if (index === 0) {
                    sums[index] = '合计';
                    return;
                }
                if (index == 1){
                    sums[index] = '/';
                }
                if (index == 2 || index == 3) {
                    const values = data.map(item => Number(item[column.property]));
                    if (!values.every(value => isNaN(value))) {
                        sums[index] = values.reduce((prev, curr) => {
                            const value = Number(curr);
                            if (!isNaN(value)) {
                                return prev + curr;
                            } else {
                                return prev;
                            }
                        }, 0);
                        sums[index] += '';
                    } else {
                        sums[index] = 'N/A';
                    }
                }
            });
            return sums;
        },
        lessChange(){
            console.log(this.selectParam.less)
            this.http_list()
        }

    },
    created() {
        this.http_list()
        this.http_dept_list()
        this.http_pro_list()
    },
    watch: {
        selectParam: {
            handler(selectParam,oldSelectParam){
                this.selectParamVersion = 1
                if (selectParam.beginDate && selectParam.endDate) {
                    let x= 0
                    if (selectParam.beginDate != selectParam.oldBeginDate) x = 1
                    if (selectParam.endDate != selectParam.oldEndDate ) x = 2
                    if ( x > 0 && new Date(selectParam.beginDate).getTime() > new Date(selectParam.endDate).getTime()) {
                        Message.warning("打卡日期：开始不能大于结束")
                        if (x == 1) selectParam.beginDate = null
                        if (x == 2) selectParam.endDate = null
                    }
                }
                selectParam.oldBeginDate = selectParam.beginDate
                selectParam.oldEndDate = selectParam.endDate
            },
            deep:true
        }
    }
}
</script>


<style>
.text {
    font-size: 14px;
}

.item {
    margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}

.clearfix:after {
    clear: both
}

.box-card {
    width: 100%;
}

.el-table th.gutter {
    display: table-cell !important
}

.el-row {
    margin-bottom: 20px;
}

.el-col {
    border-radius: 4px;
}

.bg-purple-dark {
    background: #99a9bf;
}

.bg-purple {
    background: #d3dce6;
}

.bg-purple-light {
    background: #e5e9f2;
}

.grid-content {
    border-radius: 4px;
    min-height: 36px;
}

.row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
}

.circle1 {
    border-radius: 50%;
    display: inline-block;
    margin-right: 1px;
    width: 10px;
    height: 10px;
    background: #b3d8ff;
    /* 宽度和高度需要相等 */
}
.circle2 {
    border-radius: 50%;
    display: inline-block;
    margin-right: 1px;
    width: 10px;
    height: 10px;
    background: mediumturquoise;
    /* 宽度和高度需要相等 */
}
</style>
<style lang="less" scoped>
.warpper_item{
    display: flex;
    flex-direction: column;
    .start, .end{
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-left: 50%;
        transform: translateX(-50%);
        .circle1{
            background: rgba(0,0,0,0.25);
            margin-right: 6px;
        }
    }
}
</style>
